<template>
    <div>
        <slot name="searchForm" />
        <!-- 表格部分 -->
        <el-table
            ref="DsTable"
            v-loading="loading"
            :data="tableData"
            stripe
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column v-if="isSelection" type="selection" :selectable="selectable" width="45" />
            <el-table-column
                v-for="(item, index) in columns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :min-width="item.minWidth"
                :show-overflow-tooltip="item.tooltip"
                :sortable="item.sortable">
                <template slot-scope="scope">
                    <slot name="colume" v-bind="{scope, index}">
                        <span>{{ scope.row[item.prop] }}</span>
                    </slot>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" class="operation clearfix" :fixed="fixed" :width="operationWidth">
                <template slot-scope="scope">
                    <slot name="operation" v-bind="scope" />
                </template>
            </el-table-column>
        </el-table>
        <div v-if="total > 0" class="my-pagination">
            <el-pagination
                layout="sizes, prev, pager, next, total"
                :total="total"
                :page-sizes="pageSizes"
                :current-page="pageNum"
                :page-size="pageSize"
                @size-change="sizeChange"
                @current-change="currentChange" />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: null
        },
        operationWidth: {
            type: Number,
            default: 100
        },
        isSelection: {
            type: Boolean,
            default: false
        },
        columns: {
            type: Array,
            default: () => []
        },
        tableData: {
            type: Array,
            default: () => []
        },
        sortable: {
            type: Boolean,
            default: false
        },
        fixed: {
            type: null,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            pageSizes: [10, 20, 50, 100],
            selectItems: []
        };
    },
    methods: {
        search(pageNum, pageSize) {
            this.$emit('search', pageNum, pageSize);
        },
        selectable(row, index) {
            return !row.unselectable;
        },
        // 点击页数翻页
        currentChange(val) {
            this.pageNum = val;
            this.search(this.pageNum, this.pageSize);
        },
        sizeChange(val) {
            this.pageNum = 1;
            this.pageSize = val;
            this.search(this.pageNum, this.pageSize);
        },
        getPageSize() {
            return this.pageSize;
        },
        getPageNum() {
            return this.pageNum;
        },
        handleSelectionChange(vals) {
            this.selectItems = vals;
            this.$emit('selected', vals);
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .el-table__row .el-checkbox__input.is-disabled .el-checkbox__inner{
    background-color: #e9e9e9;
}
</style>>

